<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>24°超市会员</title>
  <!--这里引入页面的样式-->
  <style>
    .cbody1{
      width: 60%;
      height: 100%;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin-bottom: 10px;
      margin-left: 233px;
      margin-top: 100px;
      text-align: center;
    }
    .quantity-section{
      margin-top: 50px;
      text-align: center;
    }

  </style>
</head>
<!--引入相关的文件-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<body>
<div id="app">
  <el-page-header @back="goBack" content="24°会员">
  </el-page-header>
  <div class="cbody1">
    <p>欢迎加入24°会员！成为我们的会员，您将享受全场8.8折的超值优惠！
      作为会员，您不仅可以尽情畅购各类商品，还能享受更多专属福利和服务。
      我们将为您提供更快捷、更优质的购物体验，让您每一次购物都感受到VIP般的待遇。
      立即注册成为24°会员，开启会员专属的折扣优惠之旅吧！</p>
    <p style="color: red">注意：单笔充值不低于五百元即可成为尊贵VIP会员！！！</p>
  </div>
  <div class="quantity-section">
    <el-button type="primary" @click="addToMember" size="medium">点击成为24°会员吧！！！</el-button>
  </div>
</div>


<script>
  const urlParams = new URLSearchParams(window.location.search);
  const uname=urlParams.get('userName');
  // 创建一个vue的实例对象,里面写那些数据和方法(一个是页面加载完后自动执行的方法，一个是其他操作后执行的代码)
  // 创建 Vue 实例
  new Vue({
    el: '#app',
    data() {
      return {
        value: new Date()
      }
    },
    methods: {
      goBack() {
        console.log('go back');
        history.go(-1); // 返回上一个页面
      },
      addToMember(){
        this.$prompt('请输入充值金额', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[1-9]\d*$/,
          inputErrorMessage: '输入金额格式不正确'
        }).then(({ value }) => {
          if (value < 500) {
            this.$alert('充值金额必须大于等于500元才能成为会员！！！', '提示', {
              confirmButtonText: '确定',
              type: 'warning'
            });
          } else {
            const currentDate = new Date();
            const formattedDate = currentDate.toISOString().slice(0, 10); // 获取当前日期并格式化为"YYYY-MM-DD"的形式
            /*console.log(formattedDate+"+++++++++++++++++++");*/
            this.$message({
              type: 'success',
              message: '您刚刚成功充值了: ' + value + "元"
            });
            axios.get("../users?op=getMember&balance="+value+"&userName="+uname+"&registrationDate="+formattedDate).then(response=>{
              console.log(response);
              if(response.data>0){
                alert("恭喜"+uname+"成为会员!!!");
              }
              else {
                alert("异常！！！");
              }
            })
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消充值'
          });
        });
      }
    },
    mounted(){

    }
  });
</script>
<!-- 不用vue的js代码写在下面-->
<script>

</script>
</body>
</html>